// 登录组件功能: 1.访问状态显示, 2.提供基本的登录窗口

Vue.component("login",{
    template:`
        <span>
            <slot name="logined" v-if="user" :user="user">
<!--                ename 应该需要配置的-->
                欢迎{{user.ename}}
                <a href="/lg/logout">退出</a>
                <a href="#" @click.prevent="showUpdate=true">修改密码</a>
            </slot>
            <slot name="nologin" v-else>
                <a href="#" @click.prevent="showLogin=true">登录</a>
                <a href="#">注册</a>
            </slot>
            <el-dialog title="登录窗口" :visible.sync="showLogin"  style="z-index: 200">
              <el-form>
                <el-form-item label="账号" :label-width="100">
                  <el-input v-model="name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="100">
                  <el-input v-model="pwd" autocomplete="off"></el-input>
                </el-form-item>
  
                 <el-form-item label="自动登录" :label-width="100">
                    <el-select v-model="autoLogin">
                        <el-option label="不自动登录" value="no"></el-option>
                        <el-option label="1天" value="day"></el-option>
                        <el-option label="1周" value="week"></el-option>
                        <el-option label="1月" value="month"></el-option>
                    </el-select>
                    <a href="/forget.html" style="margin-left: 50px;color: #1e50a2">忘记密码</a>
                </el-form-item>
              </el-form>
              </el-dialog>
              
              <!--            修改密码弹框-->
            <el-dialog title="登录" :visible.sync="showUpdate">
            <el-form>
                <el-form-item label="旧密码" :label-width="100">
                  <el-input v-model="oldPwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="100">
                  <el-input v-model="pwd" autocomplete="off"></el-input>
                  <small v-model = "errors" style="color: red">{{errors}}<small>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="100">
                  <el-input v-model="pwd1" autocomplete="off"></el-input>
                  <small v-model="errors" style="color: red">{{errors}}<small>
                </el-form-item>
                <el-form-item label="验证码">
                        <img src="vcodeImage" alt="">
                        <el-input type="vcode" v-model="vcode"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
               <el-button @click="showUpdate = false">取 消</el-button>
               <el-button type="primary" @click="save">确 定</el-button>
             </div>
              
              <div slot="footer" class="dialog-footer">
                <el-button @click="showLogin = false">取 消</el-button>
                <el-button type="primary" @click="login">登 录</el-button>
              </div>
            </el-dialog>
        </span>
    `,
    data(){
        return {
            user:null,
            name:"",pwd:"",
            autoLogin: false,
            showLogin: false,
            showUpdate:false,
            pwd1:'',
            oldPwd:'',
            vcode:'',
            errors:''
        }
    },
    props:["showLogin"],
    created(){
        axios.get("/lg/myinfo").then(res=>{
            if(res.data.code == 1){
                this.user = res.data.data;
            }
        })
    },
    methods:{
        login(){
            axios.get("/lg/login",{
                params:{
                    name: this.name, pwd: this.pwd, autoLogin: this.autoLogin
                }
            }).then(res=>{
                if(res.data.code == 1){
                    this.user = res.data.data;
                    this.$message(res.data.msg);
                    this.$forceUpdate();
                    this.showLogin = false;
                    this.name = this.pwd = "";
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        save(){


            this.errors='';
            if(this.pwd != this.pwd1){
                this.errors = '两次输入的新密码不一致';
                return;
            }
            if(this.pwd.length < 6){
                this.errors = '密码不能小于6位';
                return;
            }

            console.log(this.vcode);
            axios.get("/lg/upPwd",{params:{
                    user:this.user.ename,
                    oldPwd:this.oldPwd,
                    newPwd:this.pwd1,
                    vcode: this.vcode
                }}).then(res=>{
                if(res.data.code == 1){
                    alert("密码修改成功,\n用户信息已过期,请重新登录");
                    location.href = "index.html";
                }else{

                    alert(res.data.msg);
                }
            });
        },
    },
    watch:{
        showLogin(newValue,oldValue){
            this.$emit("update:showLogin", newValue);
        }
    }


});